* {
    padding   : 0;
    margin    : 0;
    box-sizing: border-box;
}

button {
    outline: none;
}

a {
    text-decoration: none;
    color          : #fff;
}

a:hover {
    text-decoration: none;
    /* color       : #fff; */
}

ul {
    list-style-type: none;
    margin         : 0;
    padding        : 0;
}

li {
    list-style: none;
}

/* 多边形旋转 */
@keyframes shapRound {
    0% {
        opacity  : 0;
        transform: scale(0) rotate(0deg);
    }

    3% {
        opacity  : 1;
        transform: scale(1) rotate(480deg);
    }

    90% {
        opacity      : 0.8;
        transform    : scale(1.5) rotate(1000deg);
        border-radius: 0px;
        border-width : 1px;
    }

    100% {
        opacity      : 0;
        border-radius: 1000px;
        border-width : 5px;
        transform    : scale(6) rotate(2100deg);
    }
}

/* 多边形旋转2 */
@keyframes shapRound1 {
    0% {
        opacity  : 0;
        transform: scale(0) rotate(0deg);
    }

    6% {
        opacity  : 1;
        transform: scale(1) rotate(-480deg);
    }

    90% {
        opacity      : 0.8;
        transform    : scale(1.5) rotate(-1300deg);
        border-radius: 0px;
        border-width : 1px;
    }

    100% {
        opacity      : 0;
        border-radius: 1000px;
        border-width : 5px;
        transform    : scale(6) rotate(-2100deg);
    }
}


.nav {
    width           : 100%;
    padding         : 0 100px;
    height          : 100px;
    line-height     : 100px;
    font-size       : 15px;
    font-weight     : 600px;
    background-color: #26282c;

    .nav_l {
        width: 80%;
        float: left;
        color: #fff;

        img {
            vertical-align: middle;
            margin-right  : 10px;
            width         : 25px;
        }

        a {
            color: white;
        }

        ul {
            float: right;

            li {
                float       : left;
                margin-right: 93px;

                &:hover {
                    border-bottom: 2px solid #f6cc0d;
                }

                a {
                    color   : white;
                    position: relative;

                    &:hover {
                        text-decoration: none;
                        border-bottom  : 2px solid #f6cc0d;

                        .shapeHover {
                            animation: shapRound 10s;
                        }

                        .shapeHover1 {
                            animation: shapRound1 10s;
                        }
                    }

                    .shapeHover {
                        @large     : 50px;
                        width      : @large;
                        height     : @large;
                        position   : absolute;
                        left       : 50%;
                        top        : 50%;
                        margin-left: -25px;
                        margin-top : -25px;
                        border     : solid 1px lightgray;
                        opacity    : 0;
                    }

                    .shapeHover1 {
                        @large     : 40px;
                        width      : @large;
                        height     : @large;
                        position   : absolute;
                        left       : 50%;
                        top        : 50%;
                        margin-left: -20px;
                        margin-top : -20px;
                        border     : solid 1px gray;
                        opacity    : 0;
                    }
                }
            }
        }
    }

    .nav_r {
        float: right;

        input {
            outline      : none;
            padding-left : 10px;
            border-radius: 20px;
            height       : 30px;
            color        : #000;
            border       : 4px solid gray;
        }

        img {
            vertical-align: middle;
            width         : 30px;
            margin-left   : 10px;
        }

    }
}

.myP {
    font-size     : 16px;
    letter-spacing: .4em;
}

.banner {
    position        : relative;
    height          : 2950px;
    width           : 100%;
    background-color: #282828;

    .pang {
        position        : absolute;
        height          : 2950px;
        width           : 3px;
        right           : 108px;
        top             : 0;
        background-color: #f6cc0d;

    }

    .ge_1 {
        position: absolute;
        top     : 390px;
        left    : 210px;

        img {
            width: 375px;
        }
    }

    .ge_2 {
        position: absolute;
        top     : 250px;
        left    : 425px;
    }

    .ge_3 {
        position : absolute;
        width    : 310px;
        top      : 124px;
        right    : 420px;
        color    : #fff;
        font-size: 50px;

        p {
            .myP;
        }
    }

    .ge_box {
        position: absolute;
        right   : 100px;
        top     : 100px;
        color   : #fff;

        p {
            position: absolute;
            top     : 3px;
            right   : 50px;
        }
    }

    .mao_1 {
        position : absolute;
        width    : 721px;
        top      : 685px;
        right    : 288px;
        color    : #fff;
        font-size: 50px;

        p:nth-child(1) {
            padding-left: 100px;
            transform   : translateY(-20px);
        }

        p:nth-child(2) {
            margin-top    : 0px;
            outline       : 1px solid #f6cc0d;
            padding-top   : -10px;
            padding-left  : 100px;
            padding-right : 10px;
            padding-bottom: 150px;
            font-size     : 14px;
            .myP;
        }
    }

    .mao_2 {
        position: absolute;
        top     : 1115px;
        right   : 655px;

        img {
            width: 550px;
        }
    }

    .mao_3 {
        position: absolute;
        top     : 1320px;
        right   : 1065px;
    }




    .mao_box {
        position: absolute;
        right   : 100px;
        top     : 700px;
        color   : #fff;

        p {
            position: absolute;
            top     : 3px;
            right   : 50px;
        }
    }

    .qiang_1 {
        position : absolute;
        width    : 450px;
        top      : 1545px;
        right    : 920px;
        color    : #fff;
        font-size: 50px;

        p {
            .myP;
            font-size: 14px;
        }
    }

    .qiang_2 {
        position: absolute;
        top     : 1298px;
        right   : 260px;

        img {
            width: 500px;
        }
    }

    .qiang_box {
        position: absolute;
        right   : 100px;
        top     : 1560px;
        color   : #fff;

        p {
            position: absolute;
            top     : 3px;
            right   : 50px;
        }
    }

    .ji_1 {
        position: absolute;
        top     : 2010px;
        right   : 560px;
        z-index : 2;
    }

    .ji_2 {
        position: absolute;
        top     : 2115px;
        right   : 685px;
        z-index : 2;

        img {
            width: 600px;
        }
    }

    .ji_3 {
        position: absolute;
        top     : 2280px;
        right   : 1095px;

        img {
            width: 280px;
        }
    }

    .ji_4 {
        position : absolute;
        width    : 300px;
        top      : 2166px;
        right    : 243px;
        color    : #fff;
        font-size: 50px;

        p {
            .myP;
            font-size: 14px;
        }
    }

    .ji_5 {
        position: absolute;
        top     : 2600px;
        left    : 160px;
        color   : #fff;

        ul {
            float: left;

            li {
                float: left;
                width: 30px;

                margin-right: 75px;

                img {
                    transform : rotate(90deg) translateY(28px);
                    transition: all 0.2s;
                }

                p {
                    line-height: 30px;
                    color      : white;
                    transition : all 0.2s;
                }

                &:hover {
                    img {
                        transform: rotate(90deg) translateY(28px) translateX(-30px);
                    }

                    p {
                        transform: translateY(20px);
                    }
                }
            }

            li:nth-child(2n+1) {
                padding-top: 50px;
            }
        }
    }

    .ji_box {
        position: absolute;
        right   : 100px;
        top     : 2px;
        color   : #fff;

        p {
            position: absolute;
            top     : 3px;
            right   : 50px;
        }
    }

}



// .banner {
//     height: 2000px;
//     background-color: #26282c;


//     .ge {
//         width: 100%;
//         padding: 0 100px;
//         position: relative;
//         height: 700px;
//         border: 2px solid red;

//         .ge_l {
//             height: 500px;
//             width: 50%;
//             outline: 2px solid red;
//             position: relative;

//             img:nth-child(1) {
//                 position: absolute;
//                 top: 345px;
//                 left: 215px;
//             }

//             img:nth-child(2) {
//                 position: absolute;
//                 top: 210px;
//                 left: 545px;
//             }

//         }

//         .ge_r {
//             border: 2px solid red;
//             position: absolute;
//             top: 90px;
//             width: 25%;
//             right: 615px;
//             color: #fff;
//             font-size: 50px;

//             p {
//                 padding-top: 20px;
//                 font-size: 20px;
//                 line-height: 50px
//             }
//         }

//         .box {
//             p {
//                 position: absolute;
//                 top: 5px;
//                 right: 60px;
//             }

//             position: absolute;
//             color: #fff;
//             right: 103px;
//             top: 80px;
//         }
//     }

//     .mao {
//         border: 2px solid red;
//         position: relative;

//         width: 50%;
//         height: 50px;

//         color: #fff;
//         font-size: 50px;

//         .mao_s {
//             position: absolute;
//             top: 0;
//             right: 0;

//             p {
//                 border: 2px solid #f6d656;
//                 padding-top: 20px;
//                 font-size: 20px;
//                 line-height: 50px
//             }
//         }
//     }

// }

/*
.foot {
    width     : 100%;
    height    : 250px;
    background: url(../img/foot//bc.png);
    position  : relative;

    .word {
        text-align: center;
    }

    .foot_box {
        text-align: center;
        width     : 100%;

        .foot_nav {
            width     : 100%;
            text-align: center;

            ul {
                display    : inline-block;
                font-size  : 24px;
                font-weight: 550;
                height     : 50px;

                text-align: center;

                li {
                    float       : left;
                    margin-left : 80px;
                    margin-right: 80px;

                    a {
                        color: #fff;
                    }
                }
            }
        }

        .foot_imgs {
            width      : 100%;
            margin-left: 60px;
            height     : 56px;
            position   : relative;

            img {
                margin-right: 55px;
            }
        }

        .foot_search {
            position: absolute;
            right   : 60px;
            bottom  : 17px;

            input {

                outline      : none;
                width        : 240px;
                padding-left : 10px;
                border-radius: 20px;
                height       : 30px;
                color        : #000;
                border       : 4px solid gray;
            }

            img {
                vertical-align: middle;
                width         : 23px;
                margin-left   : 10px;
            }
        }
    }
}
*/